<template lang="">
  <div>
    <vxe-button
      @click="showSpuAdd"
      status="primary"
      icon="vxe-icon-add"
      :disabled="!categoryStore.category3Id"
      v-has="'btn.Spu.add'"
    >
      添加SPU
    </vxe-button>

    <vxe-table
      style="margin: 20px 0"
      :data="spuList"
      row-config.keyField="id"
      border
    >
      <vxe-column title="序号" width="80" align="center">
        <template #default="{ $rowIndex }">
          {{ pageSize * (current - 1) + $rowIndex + 1 }}</template
        >
      </vxe-column>
      <vxe-column title="SPU名称" field="spuName"> </vxe-column>
      <vxe-column title="SPU描述" field="description"> </vxe-column>
      <vxe-column title="操作" align="center" width="250">
        <template v-slot="{ row }">
          <vxe-button
            @click="showSkuAdd(row)"
            title="添加SKU"
            status="primary"
            icon="vxe-icon-add"
            size="small"
            v-has="'btn.Spu.addsku'"
          ></vxe-button>
          <vxe-button
            @click="showSpuUpdate(row)"
            title="修改SPU"
            status="primary"
            icon="vxe-icon-edit"
            size="small"
            v-has="'btn.Spu.update'"
          ></vxe-button>
          <vxe-button
            @click="showSkuList(row)"
            title="查看SKU列表"
            status="info"
            icon="vxe-icon-info-circle-fill"
            size="small"
            v-has="'btn.Spu.skus'"
          ></vxe-button>
          <el-popconfirm
            :title="`确定删除${row.spuName}吗?`"
            @confirm="remove(row.id)"
          >
            <template #reference>
              <vxe-button
                title="删除SPU"
                status="danger"
                icon="vxe-icon-delete-fill"
                size="small"
                v-has="'btn.Spu.delete'"
              ></vxe-button>
            </template>
          </el-popconfirm>
        </template>
      </vxe-column>
    </vxe-table>

    <el-pagination
      :current-page="current"
      :page-sizes="[3, 6, 9]"
      :page-size="pageSize"
      layout="prev, pager, next, jumper, ->, sizes, total"
      :total="total"
      @current-change="getSpuList"
      @size-change="getSpuList(1, $event)"
    >
    </el-pagination>
  </div>

  <el-dialog :title="`${spu?.spuName} => SKU列表`" v-model="isShowDialog">
    <vxe-table :data="skuList" :loading="loading">
      <vxe-column field="skuName" title="名称"></vxe-column>
      <vxe-column field="price" title="价格(元)"></vxe-column>
      <vxe-column field="weight" title="重量(KG)"></vxe-column>
      <vxe-column title="默认图片">
        <template #default="{ row }">
          <el-image
            style="width: 100px; height: 100px"
            :src="row.skuDefaultImg"
          />
        </template>
      </vxe-column>
    </vxe-table>
  </el-dialog>
</template>
<script lang="ts">
export default {
  name: "SpuList",
};
</script>

<script lang="ts" setup>
import { ref, watch } from "vue";
import type { SpuListModel, SpuModel, SkuListModel } from "@/types";
import { getSpuListApi, deleteSpuApi } from "@/api/product/spu.ts";
import { findSkuListBySpuIdApi } from "@/api/product/sku";
import { VxeTablePropTypes } from "vxe-table";
import { useCategoryStore } from "@/stores/category";
import { ShowStatus } from "../types";
import { ElMessage } from "element-plus";

const categoryStore = useCategoryStore();

const spuList = ref<SpuListModel>([]);
const total = ref<number>(0);
const current = ref<number>(1);
const pageSize = ref<number>(3);
const isShowDialog = ref(false);
const spu = ref<SpuModel>();
const loading = ref(false);
const skuList = ref<SkuListModel>([]);

/**
 * 获取指定页码的列表显示
 * @param page 页码
 * @param limit 每页数量
 */
const getSpuList = async (page = current.value, limit = pageSize.value) => {
  // 更新当前页码
  current.value = page;
  pageSize.value = limit;
  // 发请求获取
  const result = await getSpuListApi({
    page,
    limit,
    category3Id: categoryStore.getCategory3Id as number,
  });
  // 读取更新数据
  spuList.value = result.records;
  total.value = result.total;
};

/*
  监视三级分类的变化, 当其没值时, 重置数据, 当有值时, 获取SPU列表
  */
watch(
  () => categoryStore.category3Id,
  (category3Id) => {
    if (!category3Id) {
      spuList.value = [];
      current.value = 1;
      pageSize.value = 3;
      total.value = 0;
      return;
    }

    getSpuList();
  },
  { immediate: true }
);

// 定义事件
const emits = defineEmits(["setShowStatus", "setCurrentSpu"]);

/*
  显示SPU添加界面
  */
const showSpuAdd = () => {
  emits("setShowStatus", ShowStatus.ADD_SPU);
  emits("setCurrentSpu");
};

/**
 * 显示SPU更新界面
 * @param row
 */
const showSpuUpdate = (row: SpuModel) => {
  emits("setShowStatus", ShowStatus.ADD_SPU);
  emits("setCurrentSpu", {
    ...row,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

/**
 * 删除Spu
 * @param id
 */
const remove = async (id: number) => {
  await deleteSpuApi(id);
  ElMessage.success("删除成功");
  getSpuList();
};

/**
 * 显示SKU添加界面
 * @param row
 */
const showSkuAdd = (row: SpuModel) => {
  emits("setShowStatus", ShowStatus.ADD_SKU);
  emits("setCurrentSpu", {
    ...row,
    spuImageList: [],
    spuSaleAttrList: [],
  });
};

/**
 * 显示指定spu下的sku列表
 * @param row spu对象
 */
const showSkuList = async (row: SpuModel) => {
  isShowDialog.value = true;
  spu.value = row;
  loading.value = true;
  // 发请求
  skuList.value = await findSkuListBySpuIdApi(row.id as number);
  loading.value = false;
};
</script>

<style></style>
